<!DOCTYPE html>
<html>
<head>
	<title>投票统计</title>
    
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
    <!-- bootstrap -->
    <link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- libraries -->
    <link href="/css/lib/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="/css/lib/font-awesome.css" type="text/css" rel="stylesheet" />
	<link href="/css/lib/jquery.dataTables.css" type="text/css"
		rel="stylesheet" />
	<link href="/css/lib/dataTable.css" type="text/css"
		rel="stylesheet" />	
    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="/css/elements.css" />
    <link rel="stylesheet" type="text/css" href="/css/icons.css" />

    <!-- this page specific styles -->
    <link rel="stylesheet" href="/css/compiled/index.css" type="text/css" media="screen" />    

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />

    <!-- lato font -->
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css' />

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

 	<!-- navbar -->
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<button type="button" class="btn btn-navbar visible-phone"
				id="menu-toggler">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>

			<a class="brand" href="index.html"><img src="/img/logo.png" /></a>

			<ul class="nav pull-right">
				<li class="hidden-phone"><input class="search" type="text" />
				</li>
				<li class="notification-dropdown hidden-phone"><a href="#"
					class="trigger"> <i class="icon-warning-sign"></i> <span
						class="count"></span>
				</a>
					<div class="pop-dialog">
						<div class="pointer right">
							<div class="arrow"></div>
							<div class="arrow_border"></div>
						</div>
						<div class="body">
							<a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
							<div class="notifications">
								<h3>1条新消息</h3>
								<a href="#" class="item"> <i class="icon-signin"></i> 
									欢迎使用投票系统 <span class="time"><i
										class="icon-time"></i></span>
								</a>
								<div class="footer">
									<a href="#" class="logout">查看所有消息</a>
								</div>
							</div>
						</div>
					</div></li>
				<li class="notification-dropdown hidden-phone"><a href="#"
					class="trigger"> <i class="icon-envelope-alt"></i>
				</a>
					<div class="pop-dialog">
						<div class="pointer right">
							<div class="arrow"></div>
							<div class="arrow_border"></div>
						</div>
						<div class="body">
							<a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
							<div class="messages">
								<div class="footer">
									<a href="#" class="logout">查看所有信息</a>
								</div>
							</div>
						</div>
					</div></li>
				<li class="dropdown"><a href="#"
					class="dropdown-toggle hidden-phone" data-toggle="dropdown">
						账户信息 <b class="caret"></b>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">账户详情</a></li>
						<li><a href="#">账户设置</a></li>
						<li><a href="#">账户修改</a></li>
					</ul></li>
				<li class="settings hidden-phone"><a href="#"
					role="button"> <i class="icon-cog"></i>
				</a></li>
				<li class="settings hidden-phone"><a href="/admin/logout"
					role="button"> <i class="icon-share-alt"></i>
				</a></li>
			</ul>
		</div>
	</div>
    <!-- end navbar -->

    <!-- sidebar -->
	<div id="sidebar-nav">
		<ul id="dashboard-menu">
			<li>
				<div class="pointer">
					<div class="arrow"></div>
					<div class="arrow_border"></div>
				</div> 
				<a href="/vote/statics"> <i class="icon-home"></i> <span>统计首页</span></a>
			</li>
			<li>
				<a href="/vote/create"> <i class="icon-signal"></i> <span>创建投票</span></a>
			</li>
			<li><a class="dropdown-toggle" href="#"> <i
					class="icon-group"></i> <span>用户信息</span> <i
					class="icon-chevron-down"></i>
			</a>
				<ul class="submenu">
					<li><a href="#">用户创建</a></li>
					<li><a href="#">用户信息编辑</a></li>
				</ul></li>
		</ul>
	</div>
    <!-- end sidebar -->


	<!-- main container -->
    <div class="content">

        <div class="container-fluid">

            <!-- upper main stats -->
            <div id="main-stats">
                <div class="row-fluid stats-row">
                    <div class="span3 stat">
                        <div class="data">
                        	<span class="number" id="optionNum"></span>   
                        	<span>个投票项</span>                                                   
                        </div>
                        <span class="date"></span>
                    </div>                 
                    <div class="span3 stat">
                        <div class="data">
                            <span class="number" id="voteNum"></span>    
                        	<span>人投票</span>                        
                        </div>
                        <span class="date"></span>
                    </div>
                    <div class="span3 stat">
                        <div class="data">
                            <span class="number" id="voteTotalNum"></span>
                            <span>张选项票</span>  
                        </div>
                        <span class="date"></span>
                    </div>
                    <div class="span3 stat">
                        <div class="data">
                            <span class="number" id="votePercent"></span>     
                        	<span>投票率</span>                   
                        </div>
                        <span class="date"></span>
                    </div>   
                </div>
            </div>
            <!-- end upper main stats -->

            <div id="pad-wrapper">

                <div class="row-fluid">
                    <h4 class="title" id="totalTile">总体统计</h4>
                    <div class="span6 chart">
                        <h5></h5>
                        <div id="hero-bar" style="height: 200px; position: relative;"></div>
                    </div>
                    <div class="span5 chart">
                        <h5>-</h5>
                        <div class="intr_div" style="height: 200px;">
						<table id="static" style="margin:0 auto;">
							<thead>
								<tr>
									<th>选项</th>
									<th>票数</th>
									<th>备注数目</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
						</div>   
                    </div>
                </div>

                <!-- UI Elements section -->
                <div class="row-fluid section ui-elements">
                    <h4>投票详情   <a href="javascript:void(0);" onclick="downloadExcel()">(excel下载)</a></h4>
                    <div class="span12">
                        <div class="intr_div" >
                        <table  id="detail">
							<thead>
								<tr>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
                        </div>
                    </div>                    
                </div>
            </div>     

        </div>
    </div>


	<!-- scripts -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery-ui-1.10.2.custom.min.js"></script>
    <!-- knob -->
    <script src="/js/jquery.knob.js"></script>
    <!-- flot charts -->
    <script src="/js/jquery.flot.js"></script>
    <script src="/js/jquery.flot.stack.js"></script>
    <script src="/js/jquery.flot.resize.js"></script>
    <script src="/js/theme.js"></script>
	<script src="/js/pokemon.js"></script>
    <!-- morrisjs -->
    <script src="/js/raphael-min.js"></script>
    <script src="/js/morris.min.js"></script>
    <script src="/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
    
    	function downloadExcel(){
    		var voteId = getUrlParam('voteId');
    		window.location.href = "/vote/getUserDetailExcel?voteId="+voteId;
    		return false
    	}
    
        $(function () {
        	
        	var voteId = getUrlParam('voteId');
        	if(voteId==null){
        		alert('voteId为空');
        		return;
        	}
        	
        	var param = {};
        	param.voteId = voteId;
        	postContent("/vote/getUserVoteStatics",param,true,function(data){
        		$('#totalTile').html('投票<'+data.voteTitle+'>'+'总体统计');
        		$('#voteTotalNum').html(data.voteTotalNum);
        		$('#voteNum').html(data.voteNum);
        		$('#optionNum').html(data.optionNum);
        		$('#votePercent').html(divPercent(data.voteTotalNum,data.voteNum));
        		var optionStatics = data.optionStatics;
        		var $tbody = $('#static').find('tbody');
        		var barData = [];
        		for(num in optionStatics){
        			//表格数据
        			var row = "<tr>";
        			row += "<td>"+optionStatics[num].showName+"</td>";
        			row += "<td>"+optionStatics[num].staticsNum+"</td>";
        			row += "<td>"+optionStatics[num].memo+"</td>";
        			row += "</tr>";
        			$tbody.append(row);
        			//柱状图数据
        			barData[num] = {};
        			barData[num].name = optionStatics[num].showName;
        			barData[num].num = optionStatics[num].staticsNum;
        		}
        		
                Morris.Bar({
                    element: 'hero-bar',
                    data: barData,
                    xkey: 'name',
                    ykeys: ['num'],
                    labels: ['投票数'],
                    barRatio: 0.4,
                    xLabelMargin: 10,
                    hideHover: 'auto',
                    barColors: ["#3d88ba"]
                });
        	});
        	
        	postContent('/vote/getUserDetailTitle',param,true,function(data){
        		var $thead = $('#detail').find('thead').find('tr');
        		var rows = [];
        		for(num in data){
        			var head = '<th>'+data[num]+'</th>';
        			$thead.append(head);
        			rows[num] = {};
        			rows[num].mData = 'data'+num;
        		}
        		//增加一个操作列
        		$thead.append('<th>操作</th>');
        		rows[data.length] = {};
        		rows[data.length].mData = 'operation';
        		$('#detail').DataTable(getCommonPageParam('/vote/getUserDetail',param,false,rows,
                     function(resp){
        				var userList = resp.aaData;
        				for(num in userList){
        					var data = userList[num].data;
        					var voteUserId = userList[num].voteUserId;
        					//userList[num]['operation'] = '<a href="/vote/showUpate?voteId='+voteId+'&voteUserId='+voteUserId+'>修改</a>';
        					userList[num]['operation'] = '<a href=/vote/showUpate?voteId='+voteId+'&voteUserId='+voteUserId+'>修改</a>';
        					for(var i=0;i<data.length;i++){
        						userList[num]['data'+i] = data[i];
        					}
        				}
                        return resp;
                     }
                ));
        	});
        	
        });
       //相除百分比
        function divPercent(data1,data2){
            var f1 = parseFloat(data1);
            var f2 = parseFloat(data2);
            if (isNaN(f1) || isNaN(f2) || f2==0) {
                return 0;
            }    

            var f = f1/f2;
            f = Math.round(f*10000)/100;
            return f.toString()+"%";
        }    
    </script>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>